<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>手写一个low碧版Vue | 北城韩雨</title><meta name="keywords" content="Vue 源码"><meta name="author" content="北城韩雨"><meta name="copyright" content="北城韩雨"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#0d0d0d"><meta name="description" content="手写一个low碧版Vue">
<meta property="og:type" content="article">
<meta property="og:title" content="手写一个low碧版Vue">
<meta property="og:url" content="http://example.com/2019/03/16/%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AAlow%E7%A2%A7%E7%89%88Vue/index.html">
<meta property="og:site_name" content="北城韩雨">
<meta property="og:description" content="手写一个low碧版Vue">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2017-07-20%2F4f06f9aa2ebcea6691a78537052e8e9f%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530599&t=32fb97bad7007bdc6c712ccadacd5721">
<meta property="article:published_time" content="2019-03-15T16:00:00.000Z">
<meta property="article:modified_time" content="2019-06-02T16:00:00.000Z">
<meta property="article:author" content="北城韩雨">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2017-07-20%2F4f06f9aa2ebcea6691a78537052e8e9f%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530599&t=32fb97bad7007bdc6c712ccadacd5721"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/2019/03/16/%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AAlow%E7%A2%A7%E7%89%88Vue/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'mediumZoom',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '手写一个low碧版Vue',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2019-06-03 00:00:00'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/coin.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/liuxing.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/showbb_in_index.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.min.css" media="defer" onload="this.media='all'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/my.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2017-07-20%2F4f06f9aa2ebcea6691a78537052e8e9f%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530599&amp;t=32fb97bad7007bdc6c712ccadacd5721')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">北城韩雨</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">手写一个low碧版Vue</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2019-03-15T16:00:00.000Z" title="发表于 2019-03-16 00:00:00">2019-03-16</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2019-06-02T16:00:00.000Z" title="更新于 2019-06-03 00:00:00">2019-06-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E6%BA%90%E7%A0%81/">源码</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5.5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>21分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="手写一个low碧版Vue"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="手写一个low碧版Vue"><a href="#手写一个low碧版Vue" class="headerlink" title="手写一个low碧版Vue"></a>手写一个low碧版Vue</h1><h2 id="Vue工作机制"><a href="#Vue工作机制" class="headerlink" title="Vue工作机制"></a>Vue工作机制</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span><span class="keyword">new</span> Vue()之后 Vue会调用初始化也就是_init()函数 初始化了生命周期、事件、props、data、computed、与watch等</span><br><span class="line"><span class="number">2.</span>其中最重要的是通过 <span class="built_in">Object</span>.definProperty设置setter 于 getter 用来实现 响应式 以及 依赖收集</span><br><span class="line"><span class="number">3.</span>初始化之后 调用$mount 挂载组件 到视图</span><br></pre></td></tr></table></figure>
<p><img src="1.png" alt=""></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>我们上面的图示 是以浏览器为例 是你script src方式引入 Vue.js</span><br><span class="line"><span class="number">2.</span>compile的作用 主要是 把你的html 编译成一个render函数 </span><br><span class="line"><span class="number">3.</span>compile的三个阶段 parse 把我们的写的html模板编译成一个ast抽象语法树 比如解析的你的指令 V-xxx等</span><br><span class="line">  optimize 标记一些静态的节点 比如 某个元素里的文本就是这样没有变过 用作后面的性能优化 </span><br><span class="line">  generate 把parse 解析的ast 转换为字符串渲染函数  在用 render <span class="function"><span class="keyword">function</span> 把他变成一个真正的函数</span></span><br><span class="line"><span class="function">4.然后便利我们的数据<span class="title">data</span> 做数据劫持 <span class="title">getter</span> 和 <span class="title">setter</span> </span></span><br><span class="line"><span class="function">5.左右的数据都会通过一个观察者<span class="title">watcher</span> 去更新 也就是说 当我们访问某个<span class="title">data</span>里的某个数值的时候 会触发我们的<span class="title">getter</span> 然后会设置一个<span class="title">wather</span>观察者(<span class="params"><span class="keyword">new</span> watcher()</span>)去盯着这个你访问的这个数值 当我们更改了你这个访问的数值的时候 也就是触发了<span class="title">setter</span> 然后我们会通知我们在<span class="title">getter</span>的是时候设置的<span class="title">watcher</span> 告诉他我改变了 然后<span class="title">watcher</span> 就去<span class="title">update</span>更新</span></span><br><span class="line"><span class="function">6.更新的时候 我们最终会比对新旧两个值 然后去打补丁 也是就<span class="title">patch</span>(<span class="params"></span>)</span></span><br><span class="line"><span class="function">7.然后就更改<span class="title">DOM</span></span></span><br></pre></td></tr></table></figure>
<h2 id="我们实现的简化版Vue流程"><a href="#我们实现的简化版Vue流程" class="headerlink" title="我们实现的简化版Vue流程"></a>我们实现的简化版Vue流程</h2><p><img src="2.png" alt=""></p>
<h2 id="Vue的响应式原理"><a href="#Vue的响应式原理" class="headerlink" title="Vue的响应式原理"></a>Vue的响应式原理</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>Vue的响应式原理 <span class="built_in">Object</span>.definProperty</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>你好,<span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;name&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">       <span class="keyword">var</span> obj = &#123;&#125;</span></span><br><span class="line"><span class="javascript">       <span class="comment">//当我访问 或者设置 obj对象里的属性时 会先走我这个劫持 然后 根据你是访问 还是设置 去做不同的逻辑</span></span></span><br><span class="line"><span class="javascript">       <span class="built_in">Object</span>.defineProperty(obj,<span class="string">&#x27;name&#x27;</span>,&#123;</span></span><br><span class="line"><span class="javascript">           <span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">&#x27;我获取了obj.name&#x27;</span>)</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#name&#x27;</span>).innerHTML</span></span><br><span class="line">           &#125;,</span><br><span class="line"><span class="javascript">           <span class="function"><span class="title">set</span>(<span class="params">nick</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">&#x27;我设置了obj.name&#x27;</span>)</span></span><br><span class="line"><span class="javascript">            <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#name&#x27;</span>).innerHTML = nick</span></span><br><span class="line">           &#125;</span><br><span class="line">       &#125;)</span><br><span class="line"><span class="javascript">    <span class="comment">//当我设置这个对象的属性的时候  会触发 set函数 参数 就是你设置的值</span></span></span><br><span class="line"><span class="javascript">    obj.name = <span class="string">&#x27;lilei&#x27;</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">//当我访问这个对象的属性的时候  会触发get 函数 这里就能劫持到 去做额外的逻辑 比如上面 我们就把#name元素的里的内容返回了 </span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(obj.name)</span></span><br><span class="line">   <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="实现响应式"><a href="#实现响应式" class="headerlink" title="实现响应式"></a>实现响应式</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>observe 递归你传进来的options的data 数据  </span><br><span class="line"><span class="number">2.</span>defineReactive 分别给你的data 做数据劫持</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用的时候</span></span><br><span class="line"><span class="comment">// const vm = new Wvue(&#123;</span></span><br><span class="line"><span class="comment">//     data:&#123;</span></span><br><span class="line"><span class="comment">//         msg:&#x27;你好&#x27;</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Wvue</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//把你传进来的配置项 </span></span><br><span class="line">        <span class="built_in">this</span>.$options = options</span><br><span class="line">        <span class="comment">//把要响应式的数据也保存一下</span></span><br><span class="line">        <span class="built_in">this</span>.$data = options.data</span><br><span class="line">        <span class="comment">//开始把数据变成响应式</span></span><br><span class="line">        <span class="built_in">this</span>.observe(<span class="built_in">this</span>.$data)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//观察data 递归便利data 是传递进来的对象 响应式</span></span><br><span class="line">    <span class="function"><span class="title">observe</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>( !value || <span class="keyword">typeof</span> value !== <span class="string">&#x27;object&#x27;</span>)&#123;</span><br><span class="line">            <span class="keyword">return</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">//便利了你data里的所有key 变成成一个数组 然后对key做响应式处理</span></span><br><span class="line">        <span class="built_in">Object</span>.keys(value).forEach( <span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">//给每个key做响应式的处理 这里面的value 就是你的data对象 key 是你的data对象里的键 value[key] 是你data对象里的 键值</span></span><br><span class="line">            <span class="built_in">this</span>.defineReactive(value,key,value[key])</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">defineReactive</span>(<span class="params">obj,key,value</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//当你当问 vm.$data.msg的时候 就触发了get 把你的值给你返回了</span></span><br><span class="line">        <span class="built_in">Object</span>.defineProperty(obj,key,&#123;</span><br><span class="line">            <span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="keyword">return</span> value</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="comment">//当你设置 vm.$data.msg的时候 就触发了set 会先比较 你的值跟你原来的值一样不一样 如果不一样我就赋值 这里形成了闭包</span></span><br><span class="line">            <span class="function"><span class="title">set</span>(<span class="params">newval</span>)</span>&#123;</span><br><span class="line">                <span class="keyword">if</span>(newval !== value)&#123;</span><br><span class="line">                    value = newval</span><br><span class="line">                    <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;key&#125;</span>属性更新了`</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="递归去响应式"><a href="#递归去响应式" class="headerlink" title="递归去响应式"></a>递归去响应式</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>刚刚我们已经写好了一个基本的响应式</span><br><span class="line"><span class="number">2.</span>但是 是无法给我们的对象套对象的数据做响应式的</span><br><span class="line"><span class="number">3.</span>比如 <span class="keyword">new</span> Wvue(&#123;</span><br><span class="line">    data:&#123;</span><br><span class="line">        msg:<span class="string">&#x27;你好&#x27;</span>,</span><br><span class="line">        err:&#123;</span><br><span class="line">            one:<span class="string">&#x27;错误以&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="number">4.</span>所以这我们还需要去递归</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Wvue</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.$options = options</span><br><span class="line">        <span class="built_in">this</span>.$data = options.data</span><br><span class="line">        <span class="built_in">this</span>.observe(<span class="built_in">this</span>.$data)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">observe</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>( !value || <span class="keyword">typeof</span> value !== <span class="string">&#x27;object&#x27;</span>)&#123;</span><br><span class="line">            <span class="keyword">return</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="built_in">Object</span>.keys(value).forEach( <span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="built_in">this</span>.defineReactive(value,key,value[key])</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">defineReactive</span>(<span class="params">obj,key,value</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//如果你的对象还有对象 我就去递归 我们上面还有个判断  if( !value &amp;&amp; typeof value !== &#x27;object&#x27;)</span></span><br><span class="line">        <span class="built_in">this</span>.observe(value)</span><br><span class="line">        <span class="built_in">Object</span>.defineProperty(obj,key,&#123;</span><br><span class="line">            <span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="keyword">return</span> value</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">set</span>(<span class="params">newval</span>)</span>&#123;</span><br><span class="line">                <span class="keyword">if</span>(newval !== value)&#123;</span><br><span class="line">                    value = newval</span><br><span class="line">                    <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;key&#125;</span>属性更新了`</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="实现无中间访问"><a href="#实现无中间访问" class="headerlink" title="实现无中间访问"></a>实现无中间访问</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>我们在使用Vue的时候 平时 都只直接 <span class="built_in">this</span>.msg   中间是没有data的 </span><br><span class="line"><span class="number">2.</span>这里的实现 其实主要就 在data中有做了数据劫持 把我们的<span class="built_in">this</span>也就是你的实例 直接 添加了 属性 值是你data里的每一个键值</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用的时候</span></span><br><span class="line"><span class="comment">//vm.msg 省去了中间的$data</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Wvue</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.$options = options</span><br><span class="line">        <span class="built_in">this</span>.$data = options.data</span><br><span class="line">        <span class="built_in">this</span>.observe(<span class="built_in">this</span>.$data)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">observe</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>( !value || <span class="keyword">typeof</span> value !== <span class="string">&#x27;object&#x27;</span>)&#123;</span><br><span class="line">            <span class="keyword">return</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="built_in">Object</span>.keys(value).forEach( <span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="built_in">this</span>.defineReactive(value,key,value[key])</span><br><span class="line">            <span class="comment">//在这里 我们实现对this的一个劫持 把我们data里的数据 直接 在this中  这样 访问的时候就可以省略 中间的data</span></span><br><span class="line">            <span class="built_in">this</span>.proxyData(key)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">proxyData</span>(<span class="params">key</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,key,&#123;</span><br><span class="line">            <span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="built_in">this</span>.$data[key]</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">set</span>(<span class="params">newval</span>)</span>&#123;</span><br><span class="line">                <span class="built_in">this</span>.$data[key] = newval</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">defineReactive</span>(<span class="params">obj,key,value</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.observe(value)</span><br><span class="line">        <span class="built_in">Object</span>.defineProperty(obj,key,&#123;</span><br><span class="line">            <span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="keyword">return</span> value</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">set</span>(<span class="params">newval</span>)</span>&#123;</span><br><span class="line">                <span class="keyword">if</span>(newval !== value)&#123;</span><br><span class="line">                    value = newval</span><br><span class="line">                    <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;key&#125;</span>属性更新了`</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="依赖收集与追踪"><a href="#依赖收集与追踪" class="headerlink" title="依赖收集与追踪"></a>依赖收集与追踪</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    template:</span><br><span class="line">    <span class="string">`&lt;div&gt;</span></span><br><span class="line"><span class="string">		&lt;span&gt;&#123;&#123;name1&#125;&#125;&lt;/span&gt;</span></span><br><span class="line"><span class="string">		&lt;span&gt;&#123;&#123;name2&#125;&#125;&lt;/span&gt;</span></span><br><span class="line"><span class="string">		&lt;span&gt;&#123;&#123;name1&#125;&#125;&lt;/span&gt;</span></span><br><span class="line"><span class="string">	 &lt;/div&gt;`</span>,</span><br><span class="line">    data:&#123;</span><br><span class="line">        name1:<span class="string">&#x27;name1&#x27;</span>,</span><br><span class="line">        name2:<span class="string">&#x27;name2&#x27;</span>,</span><br><span class="line">        name3:<span class="string">&#x27;name3&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">created</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name1 = <span class="string">&#x27;我改变了name1&#x27;</span>,</span><br><span class="line">        <span class="built_in">this</span>.name2 = <span class="string">&#x27;我改变了name2&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>上面可以看到 我们的template里的 双花括号里面的name1 是依赖我们data 里的name1 这个时候 就说明我们现在有依赖关系</span><br><span class="line"><span class="number">2.</span>name1 被修改 视图更新 且要更新两处</span><br><span class="line"><span class="number">3.</span>name2 被修改 视图更新</span><br><span class="line"><span class="number">4.</span>name3 没用到 不需要更新</span><br><span class="line"><span class="number">5.</span>所以这个时候 我们就要扫描视图 收集依赖 知道视图中到底那些地方对数据有依赖 这样数据变化的时候就可以做很多操作</span><br></pre></td></tr></table></figure>
<h2 id="实现数据依赖与追踪"><a href="#实现数据依赖与追踪" class="headerlink" title="实现数据依赖与追踪"></a>实现数据依赖与追踪</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 我们每个依赖 都对应一个watcher(也就是我们上面所说的观察者)</span><br><span class="line"><span class="number">2.</span> 比如我们上面的name1 出现了两次 所以就会对应两个watcher</span><br><span class="line"><span class="number">3.</span> 这个时候 我们需要一个dep 去收集存储我们的依赖和watcher  然后去管理我们的这些watcher 当依赖发生变化的时候 就通知我们的watcher去对数据更新 更新视图</span><br></pre></td></tr></table></figure>
<h2 id="Dep类的作用"><a href="#Dep类的作用" class="headerlink" title="Dep类的作用"></a>Dep类的作用</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>我们创建了一个Dep的类 用来收集Watcher对象 读数据的时候 会触发getter函数 把当前的watcher对象存放在Dep类中去</span><br><span class="line"><span class="number">2.</span>写数据的时候 会触发setter方法 通知Dep类调用 notify 来触发 所有的watcher 对应的update方法更新视图</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Dep:管理若干个watcher实例 它和key 是一对一的关系</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dep</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line">        <span class="built_in">this</span>.deps = []</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//每收集一个依赖 我们就在这里添加一个watcher</span></span><br><span class="line">    <span class="function"><span class="title">addDep</span>(<span class="params">watcher</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.deps.push(watcher)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//当数据更新时候 通知我们对应的watcher去做更新</span></span><br><span class="line">    <span class="function"><span class="title">notify</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.deps.forEach(<span class="function"><span class="params">dep</span> =&gt;</span> dep.update())</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="Watcher类的作用"><a href="#Watcher类的作用" class="headerlink" title="Watcher类的作用"></a>Watcher类的作用</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>用于观察依赖 每个依赖会对应一个watcher</span><br><span class="line"><span class="number">2.</span>什么时候创建watcher 我们会在编译器里的时候 去扫描 标签 发现双花括号 或 这起来依赖的 语法的时候就会创建watcher 这里为了方便测试 我们只有手动去写一下</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//保存UI中的依赖 和自己一一对应 当dep通知我更新的时候 我去更新</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Watche</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">vm,key</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.vm = vm</span><br><span class="line">        <span class="built_in">this</span>.key = key</span><br><span class="line">        <span class="comment">//将当前实例指向Dep.target</span></span><br><span class="line">        Dep.target = <span class="built_in">this</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//dep通知我更新的时候 我去更新</span></span><br><span class="line">    <span class="function"><span class="title">update</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;<span class="built_in">this</span>.key&#125;</span>属性更新`</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="3.png" alt=""></p>
<h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Wvue</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.$options = options</span><br><span class="line">        <span class="built_in">this</span>.$data = options.data</span><br><span class="line">        <span class="built_in">this</span>.observe(<span class="built_in">this</span>.$data)</span><br><span class="line">        <span class="comment">//手动测试 当然 这里的watcher创建 是在我们的编译器里执行的 扫描视图上的语法&#123;&#123;&#125;&#125;等时候创建watcher</span></span><br><span class="line">        <span class="keyword">new</span> Watcher(<span class="built_in">this</span>,<span class="string">&#x27;msg&#x27;</span>)</span><br><span class="line">        <span class="built_in">this</span>.msg</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">observe</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>( !value || <span class="keyword">typeof</span> value !== <span class="string">&#x27;object&#x27;</span>)&#123;</span><br><span class="line">            <span class="keyword">return</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="built_in">Object</span>.keys(value).forEach( <span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="built_in">this</span>.defineReactive(value,key,value[key])</span><br><span class="line">            <span class="built_in">this</span>.proxyData(key)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">proxyData</span>(<span class="params">key</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,key,&#123;</span><br><span class="line">            <span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="built_in">this</span>.$data[key]</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">set</span>(<span class="params">newval</span>)</span>&#123;</span><br><span class="line">                <span class="built_in">this</span>.$data[key] = newval</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">defineReactive</span>(<span class="params">obj,key,value</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.observe(value)</span><br><span class="line">        <span class="comment">//创建Dep实例 让我们的依赖和我们的Dep 也就是你key 一对一 对应</span></span><br><span class="line">        <span class="keyword">const</span> dep = <span class="keyword">new</span> Dep()</span><br><span class="line">        <span class="built_in">Object</span>.defineProperty(obj,key,&#123;</span><br><span class="line">            <span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="comment">//将Dep.target 指向的Wacher 实例加入到Dep中 这样就是为什么 key会和我们的watcher有关联 对应上</span></span><br><span class="line">                Dep.target &amp;&amp; dep.addDep(Dep.target) <span class="comment">//当我们的每个依赖都会产生一个watcher</span></span><br><span class="line">                <span class="keyword">return</span> value</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">set</span>(<span class="params">newval</span>)</span>&#123;</span><br><span class="line">                <span class="keyword">if</span>(newval !== value)&#123;</span><br><span class="line">                    value = newval</span><br><span class="line">                    <span class="comment">//通知 watcher 去更新</span></span><br><span class="line">                    dep.notify()</span><br><span class="line">                    <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;key&#125;</span>属性更新了`</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//Dep:管理若干个watcher实例 它和key 是一对一的关系</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dep</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line">        <span class="built_in">this</span>.deps = []</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//每收集一个依赖 我们就在这里添加一个watcher</span></span><br><span class="line">    <span class="function"><span class="title">addDep</span>(<span class="params">watcher</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.deps.push(watcher)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//当数据更新时候 通知我们对应的watcher去做更新 </span></span><br><span class="line">    <span class="function"><span class="title">notify</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.deps.forEach(<span class="function"><span class="params">watcher</span> =&gt;</span> watcher.update())</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//保存UI中的依赖 和自己一一对应 当dep通知我更新的时候 我去更新</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Watcher</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">vm,key</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.vm = vm</span><br><span class="line">        <span class="built_in">this</span>.key = key</span><br><span class="line">        <span class="comment">//将当前实例指向Dep.target 为了保证dep里的watcher和依赖一一对应</span></span><br><span class="line">        Dep.target = <span class="built_in">this</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//dep通知我更新的时候 我去更新 这里如果是DOM操作的化 视图就更新了</span></span><br><span class="line">    <span class="function"><span class="title">update</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;<span class="built_in">this</span>.key&#125;</span>属性更新`</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="编译-compile"><a href="#编译-compile" class="headerlink" title="编译 compile"></a>编译 compile</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>以上 是我们 手动实现的 收集依赖 添加watcher </span><br><span class="line"><span class="number">2.</span>真正的 watcher创建 是在编译的时候去创建的</span><br><span class="line"><span class="number">3.</span>这里我们只写一个简易版的compile 只操作DOM Vue真正的compile 是要做虚拟DOM的 </span><br></pre></td></tr></table></figure>
<h2 id="compile-的核心任务-简易版"><a href="#compile-的核心任务-简易版" class="headerlink" title="compile 的核心任务(简易版)"></a>compile 的核心任务(简易版)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>获取并且遍历DOM树</span><br><span class="line"><span class="number">2.</span>文本节点:获取&#123;&#123;&#125;&#125;格式的内容并解析</span><br><span class="line"><span class="number">3.</span>元素节点:访问节点的特性 解析 w-开头 和 @ 开头的内容</span><br></pre></td></tr></table></figure>
<p><img src="4.png" alt=""></p>
<h2 id="前置知识-fragment"><a href="#前置知识-fragment" class="headerlink" title="前置知识  fragment"></a>前置知识  fragment</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>DOM 的文档篇 可以包含和控制节点 但不会像完整的文档那样占用额外的资源 是一种轻量级的文档</span><br><span class="line"><span class="number">2.</span>可以理解为 解释为你所有DOM元素和节点 打了一个压缩包 可以来当一个仓库使用 可以在里面保存将来可能会添加到文档中的节点</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">HTML 中 有如下代码</span><br><span class="line">&lt;ol id=<span class="string">&quot;ol1&quot;</span>&gt;&lt;/ol&gt;</span><br><span class="line">现在我们想为ol这个元素 添加<span class="number">3</span>个列表项 如果逐个追加列表 将会导致浏览器反复渲染 为了避免 这个问题我们每创建的一个里表象 可以保存到我们的 fragment 里 然后一次性添加到ol中(将当于打包)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">//文档片段</span></span><br><span class="line"><span class="keyword">var</span> ol1 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;ol1&quot;</span>), li = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">var</span> fragment = <span class="built_in">document</span>.createDocumentFragment();    <span class="comment">//创建文档片段</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i &lt; <span class="number">5</span>; i++)&#123;    <span class="comment">//循环创建列表项</span></span><br><span class="line">	li = <span class="built_in">document</span>.createElement(<span class="string">&quot;li&quot;</span>);</span><br><span class="line">	li.appendChild(<span class="built_in">document</span>.createTextNode(<span class="string">&quot;Item&quot;</span> + i));</span><br><span class="line">    <span class="comment">//以前这里的写法是 我们每创建好了一个Li 就插入到ol中 这样会导致浏览器反复渲染 现在我们使用fragment</span></span><br><span class="line">	fragment.appendChild(li);    <span class="comment">//列表项添加到文档片段中</span></span><br><span class="line">&#125;</span><br><span class="line">ol1.appendChild(fragment);    <span class="comment">//将文档片段添加到文档中</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="逻辑"><a href="#逻辑" class="headerlink" title="逻辑"></a>逻辑</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//遍历模板 将里面的插值表达式解析 (双&#123;&#123;&#125;&#125;)</span></span><br><span class="line"><span class="comment">//如果有w-开头 @开头 做特别的处理</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Compile</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">el,vm</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.$vm = vm</span><br><span class="line">        <span class="built_in">this</span>.$el = <span class="built_in">document</span>.querySelector(el)</span><br><span class="line">        <span class="keyword">if</span>(<span class="built_in">this</span>.$el)&#123;</span><br><span class="line">            <span class="comment">// 将$el中的内容搬到一个fragment() </span></span><br><span class="line">            <span class="built_in">this</span>.$fragment = <span class="built_in">this</span>.node2Fragment(<span class="built_in">this</span>.$el)</span><br><span class="line">            </span><br><span class="line">            <span class="comment">//编译fragment 也就是开始递归遍历 解析我们的指令和插值表达式</span></span><br><span class="line">            <span class="built_in">this</span>.compile(<span class="built_in">this</span>.$fragment)</span><br><span class="line"></span><br><span class="line">            <span class="comment">//将编译的结果(也就是我们处理完的那些DOM节点和元素 插入到宿主中 也就是$el)</span></span><br><span class="line">            <span class="built_in">this</span>.$el.appendChild(<span class="built_in">this</span>.$fragment)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="this-node2Fragment方法"><a href="#this-node2Fragment方法" class="headerlink" title="this.node2Fragment方法"></a>this.node2Fragment方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>将我们所有的el中的第一个元素 搬家到 我们创建的 fragment</span><br><span class="line"><span class="number">2.</span>这里可以理解为 抽出来 然后放进去的操作 原有的el中的第一个元素 被抽出来放在了 fragment中 原有的el中的第二个元素 经过这样的操作 总会是第一个</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">node2Fragment</span>(<span class="params">el</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">const</span> fragment = <span class="built_in">document</span>.createDocumentFragment()</span><br><span class="line">        <span class="keyword">let</span> child </span><br><span class="line">        <span class="comment">//这里就相当于搬家</span></span><br><span class="line">        <span class="keyword">while</span> (child = el.firstChild) &#123;</span><br><span class="line">            <span class="comment">//这个while循环 一直能够进行 可以理解我 我们这是搬家的操作 每次把el中第一个</span></span><br><span class="line">            <span class="comment">//元素抽出来 放到 fragment 然后el中的第二个元素 又变成了第一个</span></span><br><span class="line">            fragment.appendChild(child)   </span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> fragment</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<h2 id="this-compile方法"><a href="#this-compile方法" class="headerlink" title="this.compile方法"></a>this.compile方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>遍历我们的移动好的fragment文档碎片</span><br><span class="line"><span class="number">2.</span>判断如果是文本节点 解析&#123;&#123;&#125;&#125; 如果有w-开头 或者 @的 就解析 指令或者事件</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">compile</span>(<span class="params">el</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//这里拿到了 el下面的所有节点 又的是 文本节点 有的是元素节点  这里获取到的是一个伪数组</span></span><br><span class="line">        <span class="keyword">const</span> childNodes = el.childNodes</span><br><span class="line">        <span class="comment">//把获取到的节点伪数组 进行遍历 根据他的类型分别去判断</span></span><br><span class="line">        <span class="built_in">Array</span>.from(childNodes).forEach( <span class="function"><span class="params">node</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span>(<span class="built_in">this</span>.isElement(node))&#123;</span><br><span class="line">                <span class="comment">//如果是元素节点 就解析 他身上的以w-开头 或者 @开头的指令</span></span><br><span class="line">                <span class="built_in">this</span>.compileElement(node)</span><br><span class="line">            &#125;<span class="keyword">else</span> <span class="keyword">if</span> (<span class="built_in">this</span>.isInterpolation(node))&#123;</span><br><span class="line">                <span class="comment">//如果是文本节点就解析 看看有每有&#123;&#123;xxx&#125;&#125;的然后 把值替换成我们Wvue里的变量 创建watcher</span></span><br><span class="line">                <span class="comment">//把插值表达式 替换为实际的内容</span></span><br><span class="line">                <span class="built_in">this</span>.compileText(node)</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            <span class="comment">//如果每个元素身上还有节点 就递归遍历</span></span><br><span class="line">            <span class="keyword">if</span>(node.childNodes &amp;&amp; node.childNodes.length &gt; <span class="number">0</span>)&#123;</span><br><span class="line">                <span class="built_in">this</span>.compile(node)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<h2 id="this-compile-下的-this-isElement方法"><a href="#this-compile-下的-this-isElement方法" class="headerlink" title="this.compile 下的 this.isElement方法"></a>this.compile 下的 this.isElement方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>判断你是不是元素 </span><br><span class="line"><span class="number">2.</span>解析 指令 比如w-开头 和 @开头</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//如果是元素节点 就解析 他身上的以w-开头 或者 @开头的指令</span></span><br><span class="line">    <span class="function"><span class="title">isElement</span>(<span class="params">node</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> node.nodeType === <span class="number">1</span></span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<h2 id="this-compileElement方法"><a href="#this-compileElement方法" class="headerlink" title="this.compileElement方法"></a>this.compileElement方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>用来获取元素上的属性</span><br><span class="line"><span class="number">2.</span>判断 如果你有w-开头 我就截取出来 通过动态的形式 去调不同的执行函数</span><br><span class="line"><span class="number">3.</span>比如 你是w-text开头 我就 截取来text 去调 text对应的函数 替换界面</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">compileElement</span>(<span class="params">node</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//查看node的属性 是否有w-开头 或者@</span></span><br><span class="line">        <span class="keyword">const</span> nodeAttrs = node.attributes <span class="comment">// 这里nodeAttrs获取到的是一个对象</span></span><br><span class="line">        <span class="built_in">Array</span>.from(nodeAttrs).forEach(<span class="function"><span class="params">attr</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">//这里的attr 就是w-text=&quot;xxx&quot; 或者w-html @之类的</span></span><br><span class="line">            <span class="keyword">const</span> attrName = attr.name <span class="comment">//这里获取到的是你的执行 比如w-text w-html</span></span><br><span class="line">            <span class="keyword">const</span> exp = attr.value <span class="comment">//这里是你获取到的那个w-text=&quot;xxx&quot; 里的xxx也就是你data中的变量</span></span><br><span class="line">            <span class="built_in">console</span>.log(attrName,<span class="string">&#x27;----attrName&#x27;</span>,exp,<span class="string">&#x27;-----exp&#x27;</span>)</span><br><span class="line">            <span class="comment">//开始截取指令</span></span><br><span class="line">            <span class="keyword">if</span>(attrName.indexOf(<span class="string">&#x27;w-&#x27;</span>) === <span class="number">0</span>)&#123;</span><br><span class="line">                <span class="keyword">const</span> dir = attrName.substring(<span class="number">2</span>) <span class="comment">//把w-text 的 text截取出来 做动态参数 好动态调取我们的方法</span></span><br><span class="line">                <span class="comment">//调取通用函数 执行我们的把文本内容替换 这调用了 text方法 然后text方法有执行了updated 在updated里</span></span><br><span class="line">                <span class="comment">//执行了 textUpdator 方法  把 内容替换调了</span></span><br><span class="line">                <span class="built_in">this</span>[dir] &amp;&amp; <span class="built_in">this</span>[dir](node,<span class="built_in">this</span>.$vm,exp)</span><br><span class="line">            &#125;<span class="keyword">else</span> <span class="keyword">if</span>(attrName.indexOf(<span class="string">&#x27;@&#x27;</span>) === <span class="number">0</span>)&#123;</span><br><span class="line">                <span class="comment">//开始截取事件名 然后编写执行的函数</span></span><br><span class="line">                 <span class="keyword">const</span> eventName = attrName.substring(<span class="number">1</span>)</span><br><span class="line">                 <span class="built_in">this</span>.eventHandler(node,<span class="built_in">this</span>.$vm,exp,eventName)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)      </span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<h2 id="model方法-w-model-双向绑定"><a href="#model方法-w-model-双向绑定" class="headerlink" title="model方法(w-model 双向绑定)"></a>model方法(w-model 双向绑定)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>首先 我们的Vue上的值变了 需要更改界面</span><br><span class="line"><span class="number">2.</span>如果 界面上的值变了 需要更改 vue实例上的值</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//v-model指令执行的方法</span></span><br><span class="line">    <span class="function"><span class="title">model</span>(<span class="params">node,vm,exp</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//值变了改界面 node是当前的节点 vm是Vue的实例 exp是data里的键</span></span><br><span class="line">        <span class="built_in">this</span>.updated(node,vm,exp,<span class="string">&#x27;model&#x27;</span>)</span><br><span class="line">        <span class="comment">//页面变了 改值 这里可能还有chage之类 </span></span><br><span class="line">        node.addEventListener(<span class="string">&#x27;input&#x27;</span>,<span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">            vm[exp] = e.target.value</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//值变了改页面 这的node多半的input框</span></span><br><span class="line">    <span class="function"><span class="title">modelUpdator</span>(<span class="params">node,value</span>)</span>&#123;</span><br><span class="line">        node.value = value</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<h2 id="html方法"><a href="#html方法" class="headerlink" title="html方法"></a>html方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html方法</span></span><br><span class="line">    <span class="function"><span class="title">html</span>(<span class="params">node,vm,exp</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.updated(node,vm,exp,<span class="string">&#x27;html&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">htmlUpdator</span>(<span class="params">node,value</span>)</span>&#123;</span><br><span class="line">        node.innerHTML = value</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<h2 id="开头的事件处理-this-eventHandler-方法"><a href="#开头的事件处理-this-eventHandler-方法" class="headerlink" title="@开头的事件处理 this.eventHandler 方法"></a>@开头的事件处理 this.eventHandler 方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>首先要不按你的@后面的事件名称拿出来</span><br><span class="line"><span class="number">2.</span>然后拿出拿出click后面对应的事件</span><br><span class="line"><span class="number">3.</span>为我们的当前元素添加 事件 然乎执行methods里的回调</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">//处理@开头的指令相关</span></span><br><span class="line"><span class="function"><span class="title">eventHandler</span>(<span class="params">node,vm,exp,eventName</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//如果你methods里有事件 我就去监听一下 然后执行你的事件回调</span></span><br><span class="line">    <span class="keyword">const</span> fn = vm.$options.methods &amp;&amp; vm.$options.methods[exp]</span><br><span class="line">    <span class="keyword">if</span>(eventName &amp;&amp; fn)&#123;</span><br><span class="line">        <span class="comment">//为你绑定的元素添加事件 并且执行methods的方法 为了防止this出问题 这里要bind一下</span></span><br><span class="line">        node.addEventListener(eventName,fn.bind(vm))</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="this-compile-下的-this-isInterpolation方法"><a href="#this-compile-下的-this-isInterpolation方法" class="headerlink" title="this.compile 下的  this.isInterpolation方法"></a>this.compile 下的  this.isInterpolation方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>解析&#123;&#123;&#125;&#125;文本</span><br><span class="line"><span class="number">2.</span>把&#123;&#123;&#125;&#125;里面的值 替换成我们<span class="built_in">this</span>.$data里赋值</span><br><span class="line"><span class="number">3.</span>这里我们用了正则匹配 并且 使用 <span class="built_in">RegExp</span>.$1来取出&#123;&#123;&#125;&#125;里面的值</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//解析文本节点 看看有每有&#123;&#123;xxx&#125;&#125;的然后 把值替换成我们Wvue里的变量 创建watcher</span></span><br><span class="line"><span class="function"><span class="title">isInterpolation</span>(<span class="params">node</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//如果你的文本类型 是3 就说明你是文本节点 并且要满足正则匹配 你里面有&#123;&#123;&#125;&#125;的语法 </span></span><br><span class="line">    <span class="keyword">return</span> node.nodeType === <span class="number">3</span> &amp;&amp; <span class="regexp">/\&#123;\&#123;(.*)\&#125;\&#125;/</span>.test(node.textContent)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="compileText方法"><a href="#compileText方法" class="headerlink" title="compileText方法"></a>compileText方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>用来取出&#123;&#123;xxxx&#125;&#125; 里面的xxxx 替换成我们Wvue实例里面的变量的值</span><br><span class="line"><span class="number">2.</span>此时这里还不是响应式的 需要我们创建watcher   </span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">compileText</span>(<span class="params">node</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.$vm[<span class="built_in">RegExp</span>.$1])</span><br><span class="line">        <span class="comment">//RegExp.$1 就是你 &#123;&#123;xxx&#125;&#125; 里匹配的xxx的部分</span></span><br><span class="line">        <span class="comment">//这里的this.vm就是你的Vue实例 由于我们这里做了无中间的data的this访问 所以可以通过这样的形式 去拿到 你data里的变量的值</span></span><br><span class="line">        <span class="comment">//然后把里面的内容替换成我们Vue实例data里定义的变量的值</span></span><br><span class="line">        node.textContent = <span class="built_in">this</span>.$vm[<span class="built_in">RegExp</span>.$1]</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<h2 id="通用函数"><a href="#通用函数" class="headerlink" title="通用函数"></a>通用函数</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>上面我们那已经实现了 把&#123;&#123;xxx&#125;&#125;解析出来 把xxx里面的值替换成我们的Wvue里面的data里面值</span><br><span class="line"><span class="number">2.</span>这里我们将来可能还有v-text v-html 和 @的指令解析 所以这里我们写一个通用的函数 </span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">compileText</span>(<span class="params">node</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">const</span> exp = <span class="built_in">RegExp</span>.$1 <span class="comment">//把变量都取出来</span></span><br><span class="line">        <span class="built_in">this</span>.updated(node,<span class="built_in">this</span>.$vm,exp,<span class="string">&#x27;text&#x27;</span>) <span class="comment">//这里我么已经知道了 你是解析&#123;&#123;&#125;&#125;的方法 所以我传进去text</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//这个通用函数 通过动态匹配 就知道调取我们的textUpdator方法 去改变&#123;&#123;&#125;&#125;里面的值</span></span><br><span class="line">    updated (node,vm,exp,dir) &#123;</span><br><span class="line">        <span class="comment">//这里我们可能是解析&#123;&#123;&#125;&#125; 也可能是解析 w-text 或者 w-html 这里我们写一个通用的函数 通过传参去匹配调用</span></span><br><span class="line">        <span class="keyword">const</span> fn = <span class="built_in">this</span>[dir + <span class="string">&#x27;Updator&#x27;</span>]</span><br><span class="line">        <span class="comment">//调用我们的textUpdator 函数 把界面上的&#123;&#123;xxx&#125;&#125;替换为我们的Vue实例中的data里的变量的键值</span></span><br><span class="line">        fn &amp;&amp; fn(node,vm[exp])</span><br><span class="line">        <span class="keyword">new</span> Watcher(vm,exp,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            fn &amp;&amp; fn(node,vm[exp])</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">textUpdator</span>(<span class="params">node,value</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//替换界面中的&#123;&#123;&#125;&#125;里面的内容 为我们Vue里面data里面的键值</span></span><br><span class="line">        node.textContent = value</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<h2 id="创建watcher"><a href="#创建watcher" class="headerlink" title="创建watcher"></a>创建watcher</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>我们创建watcher的时机是在 解析&#123;&#123;&#125;&#125;括号的时候创建的 也就是我们的</span><br><span class="line"><span class="number">2.</span>创建的watcher 我们需要手动访问一下Vue里data里的键 手动触发一下 get函数</span><br><span class="line"><span class="number">3.</span>当我们在给我们的Vue中data里的键改变键值的时候 触发set函数 然后dep通知更新 调用了watcher实例里的update函数</span><br><span class="line"><span class="number">4.</span>updata函数里面 是我们在解析&#123;&#123;&#125;&#125;解析双花括号的时候 传进去一个回调函数 这个函数 是我们刚刚上面解析&#123;&#123;&#125;&#125;括号的时候把里面的值替换为我们vue里data键值的textUpdator()函数</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//保存UI中的依赖 和自己一一对应 当dep通知我更新的时候 我去更新</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Watcher</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">vm,key,cb</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//这里由于我们的watcher创建是在你compile解析双化括号的时候创建的 所以这个</span></span><br><span class="line">        <span class="comment">//vm是Wvue的实例 key 是你通过RegExp.$1 解析出来data里的变量键值 </span></span><br><span class="line">        <span class="built_in">this</span>.vm = vm</span><br><span class="line">        <span class="built_in">this</span>.key = key</span><br><span class="line">        <span class="comment">//赋值我们的回调函数</span></span><br><span class="line">        <span class="built_in">this</span>.cb = cb</span><br><span class="line">        <span class="comment">//将当前实例指向Dep.target 为了保证dep里的watcher</span></span><br><span class="line">        Dep.target = <span class="built_in">this</span></span><br><span class="line">        <span class="comment">//访问一下Wvue里的data 触发get函数 让Dep类 把watcher添加进去</span></span><br><span class="line">        <span class="built_in">this</span>.vm[<span class="built_in">this</span>.key]</span><br><span class="line">        <span class="comment">//以防万一 在恢复成null</span></span><br><span class="line">        Dep.target = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//dep通知我更新的时候 我去更新</span></span><br><span class="line">    <span class="function"><span class="title">update</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">//这里为了防止this指向有问题 所以用了call</span></span><br><span class="line">        <span class="comment">//调取了我们的解析&#123;&#123;&#125;&#125;括号的时候 更新视图中的那个函数</span></span><br><span class="line">       <span class="built_in">this</span>.cb.call(<span class="built_in">this</span>.vm,<span class="built_in">this</span>.vm[<span class="built_in">this</span>.key])</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="Vue 工作机制.jpg" alt=""></p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>这里我们的compile 做了DOM操作  其实真正的Vue compile就是编辑成render函数 没有DOM的草走</span><br><span class="line"><span class="number">2.</span>这里我们每个变量都添加了一个watcher 属于Vue1<span class="number">.0</span>的写法 这样性能开销很大 所以到了<span class="number">2.0</span> 都是一个组件对应一个watcher</span><br><span class="line"><span class="number">3.</span>代码 https:<span class="comment">//github.com/wazer1987/VueCode</span></span><br></pre></td></tr></table></figure>
</article><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h>手写一个low碧版Vue</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="http://example.com/2019/03/16/%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AAlow%E7%A2%A7%E7%89%88Vue/">http://example.com/2019/03/16/%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AAlow%E7%A2%A7%E7%89%88Vue/</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h>北城韩雨</h></div></div><div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h>2019-03-16</h></div></div><div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h>2019-06-03</h></div></div><div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue/">Vue</a></div><div class="post_share"></div></div><link rel="stylesheet" href="/" media="defer" onload="this.media='all'"/><div class="post-reward"><button class="tip-button reward-button"><span class="tip-button__text">打赏</span><div class="coin-wrapper"><div class="coin"><div class="coin__middle"></div><div class="coin__back"></div><div class="coin__front"></div></div></div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/weixin.jpg" target="_blank"><img class="post-qr-code-img" src="/img/weixin.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/img/taobao.jpg" target="_blank"><img class="post-qr-code-img" src="/img/taobao.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></button></div><script defer="defer" src="/"></script><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2019/03/18/%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AAmini%E7%89%88vue-router/"><img class="prev-cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-12-05%2F66b696ea615f3567a32b65f93611a814%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530687&amp;t=c2e3c97de6dbdc29e77593d5f4dc7fb5" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">手写一个mini版本vue-router</div></div></a></div><div class="next-post pull-right"><a href="/2019/03/14/Vue%E6%BA%90%E7%A0%81/"><img class="next-cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue 源码解析</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin"><img class="cover" src="/img/gin-vue-admin.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-04-16</div><div class="title">Gin-Vue-Admin</div></div></a></div><div><a href="/2021/01/08/Vue源码开发之组件的渲染10/" title="Vue源码开发-组件的渲染10"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-08</div><div class="title">Vue源码开发-组件的渲染10</div></div></a></div><div><a href="/2021/01/07/Vue源码开发之组件的合并策略09/" title="Vue源码开发-组件合并策略09"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530702&t=80943e12d5239f63beafd6d1c540855f" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-07</div><div class="title">Vue源码开发-组件合并策略09</div></div></a></div><div><a href="/2021/01/06/Vue源码开发之数组的依赖收集08/" title="Vue源码开发-数组的依赖收集08"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-06</div><div class="title">Vue源码开发-数组的依赖收集08</div></div></a></div><div><a href="/2021/01/06/Vue源码开发之生命周期合并07/" title="Vue源码开发-生命周期合并07"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530659&t=bbcfe1e86f393eecbb0722db1b92e475" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-06</div><div class="title">Vue源码开发-生命周期合并07</div></div></a></div><div><a href="/2021/01/05/Vue源码开发之批量更新06/" title="Vue源码开发-批量更新06"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-05</div><div class="title">Vue源码开发-批量更新06</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/my.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">北城韩雨</div><div class="author-info__description">一个前端界的小学生</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/wazer1987"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="/wangzhengvslike@163.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content"><p>感谢访问本站，如喜欢请收藏。本站主要分享前端知识，立志成为资深前端工程师，但目前是一个前端界的小学生 若喜欢可以打赏请博主喝一杯冰阔落</p> <p>另外请大家多多支持淼哥的开源项目</p> <p>https://github.com/flipped-aurora/gin-vue-admin</p> <p>🌟🌟欢迎大家start 🌟🌟</p> <p>欢迎加入博主的前端技术交流群</p> <p style="background:rgba(255,255,255,1);margin:0"> <img src="/img/code.png"></img> </p></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AAlow%E7%A2%A7%E7%89%88Vue"><span class="toc-text">手写一个low碧版Vue</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue%E5%B7%A5%E4%BD%9C%E6%9C%BA%E5%88%B6"><span class="toc-text">Vue工作机制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%88%91%E4%BB%AC%E5%AE%9E%E7%8E%B0%E7%9A%84%E7%AE%80%E5%8C%96%E7%89%88Vue%E6%B5%81%E7%A8%8B"><span class="toc-text">我们实现的简化版Vue流程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86"><span class="toc-text">Vue的响应式原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E5%93%8D%E5%BA%94%E5%BC%8F"><span class="toc-text">实现响应式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%92%E5%BD%92%E5%8E%BB%E5%93%8D%E5%BA%94%E5%BC%8F"><span class="toc-text">递归去响应式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E6%97%A0%E4%B8%AD%E9%97%B4%E8%AE%BF%E9%97%AE"><span class="toc-text">实现无中间访问</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%86%E4%B8%8E%E8%BF%BD%E8%B8%AA"><span class="toc-text">依赖收集与追踪</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E4%BE%9D%E8%B5%96%E4%B8%8E%E8%BF%BD%E8%B8%AA"><span class="toc-text">实现数据依赖与追踪</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Dep%E7%B1%BB%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="toc-text">Dep类的作用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Watcher%E7%B1%BB%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="toc-text">Watcher类的作用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0"><span class="toc-text">实现</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E8%AF%91-compile"><span class="toc-text">编译 compile</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#compile-%E7%9A%84%E6%A0%B8%E5%BF%83%E4%BB%BB%E5%8A%A1-%E7%AE%80%E6%98%93%E7%89%88"><span class="toc-text">compile 的核心任务(简易版)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86-fragment"><span class="toc-text">前置知识  fragment</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%BB%E8%BE%91"><span class="toc-text">逻辑</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#this-node2Fragment%E6%96%B9%E6%B3%95"><span class="toc-text">this.node2Fragment方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#this-compile%E6%96%B9%E6%B3%95"><span class="toc-text">this.compile方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#this-compile-%E4%B8%8B%E7%9A%84-this-isElement%E6%96%B9%E6%B3%95"><span class="toc-text">this.compile 下的 this.isElement方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#this-compileElement%E6%96%B9%E6%B3%95"><span class="toc-text">this.compileElement方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#model%E6%96%B9%E6%B3%95-w-model-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A"><span class="toc-text">model方法(w-model 双向绑定)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E6%96%B9%E6%B3%95"><span class="toc-text">html方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E5%A4%B4%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86-this-eventHandler-%E6%96%B9%E6%B3%95"><span class="toc-text">@开头的事件处理 this.eventHandler 方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#this-compile-%E4%B8%8B%E7%9A%84-this-isInterpolation%E6%96%B9%E6%B3%95"><span class="toc-text">this.compile 下的  this.isInterpolation方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#compileText%E6%96%B9%E6%B3%95"><span class="toc-text">compileText方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E7%94%A8%E5%87%BD%E6%95%B0"><span class="toc-text">通用函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAwatcher"><span class="toc-text">创建watcher</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-text">总结</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin"><img src="/img/gin-vue-admin.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Gin-Vue-Admin"/></a><div class="content"><a class="title" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin">Gin-Vue-Admin</a><time datetime="2021-04-15T16:00:00.000Z" title="发表于 2021-04-16 00:00:00">2021-04-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件的渲染10"/></a><div class="content"><a class="title" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10">Vue源码开发-组件的渲染10</a><time datetime="2021-01-07T16:00:00.000Z" title="发表于 2021-01-08 00:00:00">2021-01-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件合并策略09"/></a><div class="content"><a class="title" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09">Vue源码开发-组件合并策略09</a><time datetime="2021-01-06T16:00:00.000Z" title="发表于 2021-01-07 00:00:00">2021-01-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-数组的依赖收集08"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08">Vue源码开发-数组的依赖收集08</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-生命周期合并07"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07">Vue源码开发-生命周期合并07</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright"><span>&copy;2017 - 2021</span><svg style="width:2em; height:2em;position: relative;top: 10px;" aria-hidden="true"><use xlink:href="#icon-Butterfly"></use></svg><span>北城韩雨</span></div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><p><a style="margin-inline:5px" target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a><a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a><a style="margin-inline:5px" target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js"></script><div class="js-pjax"></div><script defer src="/live2d-widget/autoload.js"></script><script src="/js/coin.js"></script><script async src="//at.alicdn.com/t/font_2700632_3rtvhzzpl3h.js"></script><script src="/js/liuxing.js" data-pjax></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1s');
    arr[i].setAttribute('data-wow-delay', '0ms');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>